import { Input, Select, Button, Space } from 'antd';
import { SearchOutlined, SyncOutlined  } from '@ant-design/icons';
import type { UserStatus, FilterOptions } from '@/types/user';


interface SearchFilterProps {
  initialValues?:FilterOptions;
  departments: string[];
  onFilterChange: (newFilters: FilterOptions | ((prev: FilterOptions) => FilterOptions)) => void;
}

const { Option } = Select;

const SearchFilter = ({ 
  initialValues, 
  departments, 
  onFilterChange 
}: SearchFilterProps) => {
  // 缓存 filters，只有当 initialValues 相关字段变化时才重新创建
const filters = 
  {
    searchText: initialValues?.searchText || '',
    status: initialValues?.status || '',
    department: initialValues?.department || ''
  }

  // 当筛选条件变化时通知父组件
  // useEffect(() => {
  //   onFilterChange(filters);
  // }, [filters, onFilterChange]);

  // 处理搜索输入变化
  const handleSearchChange = (value: string) => {
    onFilterChange(prev => ({ ...prev, searchText: value }));
  };

  // 处理状态筛选变化
  const handleStatusChange = (value: UserStatus | '') => {
    onFilterChange(prev => ({ ...prev, status: value }));
  };

  // 处理部门筛选变化
  const handleDepartmentChange = (value: string) => {
    onFilterChange(prev => ({ ...prev, department: value }));
  };

  // 重置筛选条件
  const handleReset = () => {
    onFilterChange({
      searchText: '',
      status: '',
      department: ''
    });
  };

  return (
    <Space.Compact style={{ width: '100%' }} size="middle" className="search-space">
      <Input
        placeholder="搜索姓名、邮箱或部门..."
        value={filters.searchText}
        onChange={(e) => handleSearchChange(e.target.value)}
        prefix={<SearchOutlined />}
        allowClear
        style={{ flex: 1 }}
      />
      
      <Select
        placeholder="选择状态"
        value={filters.status}
        onChange={handleStatusChange}
        allowClear
        style={{ width: 150 }}
      >
        <Option value="active">活跃</Option>
        <Option value="inactive">未活跃</Option>
        <Option value="pending">待审核</Option>
        <Option value="suspended">已停用</Option>
      </Select>
      
      <Select
        placeholder="选择部门"
        value={filters.department}
        onChange={handleDepartmentChange}
        allowClear
        style={{ width: 150 }}
      >
        {departments.map(dept => (
          <Option key={dept} value={dept}>{dept}</Option>
        ))}
      </Select>
      
      <Button 
        icon={<SyncOutlined/>} 
        onClick={handleReset}
      >
        重置
      </Button>
    </Space.Compact>
  );
};

export default SearchFilter;
    